<script setup lang="ts">
import CdlDescriptions from "@/components/descriptions";
import CdlTable from "@/components/table";
import {useRoute, useRouter} from "vue-router";
import {ref} from "vue";
import {FormData} from "@/interfaces/components/Page";
import {Inspect, InspectItem, Item} from "@/interfaces/views/vehicle/inspect";
import {DescriptionsTree} from "@/interfaces/components/Descriptions";
import {TableTree} from "@/interfaces/components/Table";
import {useInspectionInfoApi} from "@/api/vehicle/inspection";
import {mergeObjects} from "@/utils/utilities";

const router = useRouter()
const route = useRoute()
if(route.query.id) initData()

const basicData = ref<FormData<Inspect>>({
  id:undefined,
  licensePlate: "",
  type: undefined,
  expTime: "",
  handledBy: "",
  remind: undefined,
  inspectInstitution: "",
  inspector: "",
  fee: undefined,
  result: undefined,
  inspectTime: "",
  isClear: undefined,
  opinion: "",
  remark: ""
})
const basicDetailTree: DescriptionsTree<Inspect> = [
  {label: "关联车辆", prop: "licensePlate"},
  {label: "检查类型", prop: "type", dict: "inspect_Item_type"},
  {label: "经办人", prop: "handledBy"},
  {label: "提醒设置", prop: "remind", dict: "expiration_reminder"},
  {label: "检查单位", prop: "inspectInstitution"},
  {label: "检查人", prop: "inspector"},
  {label: "检查总费用", prop: "fee"},
  {label: "检查日期", prop: "inspectTime"},
  {label: "检查结果", prop: "result", dict: "inspect_result"},
  {label: "是否结算", prop: "isClear"},
  {label: "到期日期", prop: "expTime"},
  {label: "创建人/创建时间"},
  {label: "更新人/更新时间"}
]
const inspectItemData = ref([])
const inspectTableTree: TableTree<Item> = {
  colRule: [
    {ti: "检查项名称", prop: "label"},
    {ti: "检查结果", prop: "value", dict: "inspect_item_body"}
  ]
}

/**
 * 跳转编辑
 */
function jumInspectUpdate(){
  router.push({
    path: "/vehicleManage/inspect/createAndModifyInspect",
    query: {
      id: route.query.id,
      type: route.query.type
    }
  })
}
/**
 * 初始化数据
 */
function initData(){
  useInspectionInfoApi(route.query.id as string).then(res =>{
    const {inspectItems, ...rest} = res.data
    mergeObjects(basicData.value, rest)
    inspectItemData.value = inspectItems
  })
}
/**
 * 回退页面
 */
function fallbackPage(){
  router.back()
}


</script>

<template>
  <el-card style="position: relative">
    <button class="back_btn" @click="fallbackPage"></button>
    <div class="main_control">
      <el-button type="success" @click="jumInspectUpdate" v-auth="'vehicle:inspect:update'">编辑</el-button>
      <el-button type="danger">删除</el-button>
    </div>
    <h1 class="top_line">基础信息</h1>
    <el-divider></el-divider>
    <CdlDescriptions :model="basicData" :template-tree="basicDetailTree"></CdlDescriptions>
    <h1>检查项项详情</h1>
    <el-divider></el-divider>
    <CdlTable :data="inspectItemData" :template-tree="inspectTableTree" border></CdlTable>
    <p style="margin-top: 15px">意见：{{basicData.opinion || "未填写意见"}}</p>
  </el-card>
</template>
